const baseUrlDatail = 'https://pic.nbblmc.cn'
let pics = [] // 声明 imageList 变量并初始化为空数组

// 图片直播渲染
function function_name() {
  pics = []
  axios({
    url: `${baseUrlDatail}/api/LivePictureDisplay/list`,
    method: 'GET',
    params: {
      liveId: getUrlKey('liveId'),
      page: 1,
      pageSize: 10,
    },
  }).then((res) => {
    console.log(res)
    pics = res.data.data
    pics.reverse()
    // console.log(imageList)
    console.log(pics)
    const pics_length = pics.length
    console.log(pics_length)
    let pic_index = pics.findIndex((item) => {
      return ~~item.id === ~~id
    })

    console.log(pic_index)
    putPics(pics, pic_index, pics_length)
    const progress_info = document.querySelector('.progress-info')
    progress_info.innerHTML = `${pic_index + 1} / ${pics_length}`

    //   const progress_info = document.querySelector('.progress-info')
    //   progress_info.innerHTML = `${pic_index + 1} / ${pics_length}`
    const progress_info_width =
      document.querySelector('.progress-info').offsetWidth
    const line_width = document.querySelector('.line').offsetWidth
    let left = (pic_index / pics_length) * 100 + '%'
    if (
      (pic_index / pics_length) * line_width + progress_info_width >
      line_width
    ) {
      left = line_width - progress_info_width + 'px'
    }
    // const progress_info = document.querySelector('.progress-info')
    progress_info.style.left = left
    // 点击展示高清图片的时候
    const gqBtn = document.querySelector('.gq-btn')
    // 点击高清图
    gqBtn.onclick = function () {
      const item = document.querySelectorAll('.pic')[pic_index]
      console.log(pic_index)
      console.log(item)
      item.setAttribute('src', item.getAttribute('data-GQ'))
      alert('下载高清图成功!')
    }

    // 点击下载
    const download = document.querySelector('.download')
    console.log(download)
    download.onclick = function () {
      alert('图片保存成功!')
      const item = document.querySelectorAll('.pic')[pic_index]
      console.log(item)
      const url = item.getAttribute('data-GQ')
      console.log(url)
      const id = item.getAttribute('data-id')
      console.log(id)
      originalImage(id)
      window.CP2.saveImage({
        url: item.src,
      }).then((res) => {
        console.log(res)
      })
    }
    const transmit = document.querySelector('.transmit')
    transmit.onclick = function () {
      window.CP2.showShare({ title: '图片直播' }).then((res) => {
        console.log(res)
      })
    }
  })
}

// 热门渲染
function function_nameHot() {
  pics = []
  axios({
    url: `${baseUrlDatail}/api/LivePictureDisplay/hotList`,
    method: 'GET',
    params: {
      liveId: getUrlKey('liveId'),
      page: 1,
      pageSize: 10,
    },
  }).then((res) => {
    console.log(res)
    pics = res.data.data
    // console.log(imageList)
    console.log(pics)
    const pics_length = pics.length
    console.log(pics_length)
    let pic_index = pics.findIndex((item) => {
      return ~~item.id === ~~id
    })

    console.log(pic_index)
    putPics(pics, pic_index, pics_length)
    const progress_info = document.querySelector('.progress-info')
    progress_info.innerHTML = `${pic_index + 1} / ${pics_length}`

    //   const progress_info = document.querySelector('.progress-info')
    //   progress_info.innerHTML = `${pic_index + 1} / ${pics_length}`
    const progress_info_width =
      document.querySelector('.progress-info').offsetWidth
    const line_width = document.querySelector('.line').offsetWidth
    let left = (pic_index / pics_length) * 100 + '%'
    if (
      (pic_index / pics_length) * line_width + progress_info_width >
      line_width
    ) {
      left = line_width - progress_info_width + 'px'
    }
    progress_info.style.left = left
    const transmit = document.querySelector('.transmit')
    transmit.onclick = function () {
      window.CP2.showShare({ title: '图片直播' }).then((res) => {
        console.log(res)
      })
    }
  })
}

function_name()

function getUrlKey(name) {
  return (
    decodeURIComponent(
      (new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(
        location.href
      ) || [, ''])[1].replace(/\+/g, '%20')
    ) || null
  )
}

// 获取点击时候的照片id，从理由地址获取
const _params = window.location.search.split('?')[1].split('&')
const params = {}
_params.forEach((item) => {
  const key = item.split('=')[0]
  const value = item.split('=')[1]
  params[key] = value
})

const id = params.id
console.log('id', id)

const mid = document.querySelector('.mid')
// const progress_info = document.querySelector('.progress-info')

// 点击关闭的时候返回上一页
const close = document.querySelector('.close')
close.onclick = function () {
  console.log('返回上一页')
  window.history.back()
}

function putPics(pics, pic_index, pics_length, progress_info) {
  let html = ''
  // 同时储存普通图片和高清图片
  pics.forEach((item, i) => {
    if (~~item.id !== ~~id) {
      html += `<img src="${item.urlSL}" class="pic"" data-id="${item.id}" style="display: none;" data-src="${item.urlSL}" data-gq="${baseUrlDatail}${item.urlGQ}">`
    } else {
      pic_index = i
      html += `<img src="${item.urlSL}" class="pic"" data-id="${item.id}" style="display: inline-block;" data-src="${item.urlSL}" data-gq="${baseUrlDatail}${item.urlGQ}">`
      showProgressInfo()
    }
  })
  mid.innerHTML = html
  setTimeout(() => {
    document
      .querySelectorAll('.pic')
      .forEach((item) => (item.style.display = 'inline-block'))
    mid.scrollLeft = pic_index * mid.offsetWidth
    // console.log(pic_index * mid.offsetWidth, pic_index, mid.scrollLeft)
  }, 1000)
  let startX, scrollLeft
  mid.addEventListener('touchstart', (e) => {
    startX = e.touches[0].clientX
    scrollLeft = mid.scrollLeft
  })
  mid.addEventListener('touchmove', (e) => {
    e.preventDefault() // 阻止默认滚动行为
    const x = e.touches[0].clientX
    const walk = (x - startX) * 2 // 根据手指移动的距离来滚动
    mid.scrollLeft = scrollLeft - walk
  })
  mid.addEventListener('touchend', () => {
    const dx = mid.scrollLeft - scrollLeft
    if (Math.abs(dx) > mid.clientWidth / 2 || mid.scrollLeft === scrollLeft) {
      // 如果滑动距离大于一半屏幕宽度，切换图片
      if (dx > 0 || (mid.scrollLeft === scrollLeft && scrollLeft > 0)) {
        // 向左滑动，显示上一张图片
        console.log('向左滑动，显示上一张图片')
        if (pic_index + 1 === mid.children.length) {
          // 到头了
        } else {
          pic_index = (pic_index + 1) % mid.children.length
          console.log('当前index', pic_index)
        }
      } else {
        // 向右滑动，显示下一张图片
        // console.log('向右滑动，显示下一张图片', pic_index - 1, (pic_index - 1 + mid.children.length) % mid.children.length, mid.children.length)
        if (pic_index - 1 < 0) {
          // 到头了
        } else {
          pic_index =
            (pic_index - 1 + mid.children.length) % mid.children.length
        }
      }
      mid.scrollLeft = mid.children[pic_index].offsetLeft
    } else {
      // 如果滑动距离小于一半屏幕宽度，回到原位
      mid.scrollLeft = mid.children[pic_index].offsetLeft
    }
    showProgressInfo(pics, pic_index, pics_length)
  })
}

// 监听图片滚动
function showProgressInfo(pics, pic_index, pics_length) {
  const progress_info = document.querySelector('.progress-info')
  progress_info.innerHTML = `${pic_index + 1} / ${pics_length}`
  // 点击展示高清图片的时候
  const gqBtn = document.querySelector('.gq-btn')
  // 点击高清图
  gqBtn.onclick = function () {
    const item = document.querySelectorAll('.pic')[pic_index]
    console.log(pic_index)
    console.log(item)
    item.setAttribute('src', item.getAttribute('data-GQ'))
    alert('下载高清图成功!')
  }

  // 点击下载
  const download = document.querySelector('.download')
  console.log(download)
  download.onclick = function () {
    alert('图片保存成功!')
    const item = document.querySelectorAll('.pic')[pic_index]
    console.log(item)
    const url = item.getAttribute('data-GQ')
    console.log(url)
    const id = item.getAttribute('data-id')
    console.log(id)
    originalImage(id)
    window.CP2.saveImage({
      url: item.src,
    }).then((res) => {
      console.log(res)
    })
  }

  const progress_info_width =
    document.querySelector('.progress-info').offsetWidth
  const line_width = document.querySelector('.line').offsetWidth
  let left = (pic_index / pics_length) * 100 + '%'
  if (
    (pic_index / pics_length) * line_width + progress_info_width >
    line_width
  ) {
    left = line_width - progress_info_width + 'px'
  }
  progress_info.style.left = left
}

// 原图下载
function originalImage(id) {
  axios({
    url: `${baseUrlDatail}/api/LivePictureDisplay/DownloadImg/${id}`,
    method: 'GET',
  }).then((res) => {
    console.log(res)
  })
}
